<template>
	<view>
		<go-top ref="goTopDom" :isIcon="flag" :styObj="styTarget">
			<image src="https://img1.baidu.com/it/u=3626803807,3957619072&fm=26&fmt=auto&gp=0.jpg" mode="widthFix" class="top_img"></image>
		</go-top>
		<view class="cont">
			<view class="fixed_top_box">
				<radio-group @change="radioChange" class="auto_radio">
					<label v-for="(item, index) in radioList" :key="index" class="label_panel">
						<view>
						 <radio :value="item.val" :checked="index === current" />
						</view>
						<view>{{item.name}}</view>
					</label>
				</radio-group>
			</view>
			<view class="cont_text">向上滑动屏幕</view>
		</view>

		
	</view>
</template>

<script>
	import goTop from '@/components/ker-go-top/ker-go-top'
	export default {
		components:{ goTop },
		data() {
			return {
				flag: true,  //是否为自定义内容
				current: 0,
				styTarget: {},
				radioList: [
					{val: 'base', name: '基础用法'},
					{val: 'byUse', name: '自定义内容'}
				]
				
			}
		},
		onPageScroll: function(e){
		 this.$refs.goTopDom.init(e.scrollTop)
		},
		methods: {
			radioChange(e) {
				if(e.detail.value==='base'){
					this.flag = true
					this.styTarget = {
						width: '90rpx',
						height: '90rpx',
						borderRadius: '100%',
						bottom: '40%',
						right: '0',
						background: 'rgba(0,0,0,0.4)'
					};
					this.current = 0;
				} else{
					this.flag = false;
					this.current = 1;
					this.styTarget = {
						width: '100rpx',
						height: 'auto',
						borderRadius: '0',
						bottom: '40%',
						right: '10%',
						background: 'none'
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.cont{
		height: 2000px; 
		background: #F0F0F0; 
		padding: 50rpx 0; 
		text-align: center;
		font-size: 30rpx;
		.fixed_top_box{
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			background: #2F9BFE;
			/* #ifdef */
			padding-top: 44px;
			/* #endif */
		}
	}
	.auto_radio {
		height: 120rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		.label_panel {
			display: flex;
			justify-content: flex-start;
			margin: 0 auto;
			margin-bottom: 20rpx;
		}
	}
	.top_img{
		width: 100rpx;
		display: block;
	}
	.cont_text{
		padding-top: 120rpx;
	}
</style>
